<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import OneCourse from "@/components/front/OneCourse.vue";

import { SearchStore } from '@/stores/frontData/SearchList'

// 页面发送请求
import { AllMenu, GetCourseByid, GetAllCourse } from '@/api/SearchList'
import { initCustomFormatter, onMounted } from "vue";
import { test } from "@/api/teacher/wang/shiti";

const store = SearchStore();

// 图片地址
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'


//进入页面初始化
onMounted(() => {
  init()

})


// 调用函数初始化数据
const init = () => {
  // 获取专题分类列表
  AllMenu().then((resp) => {
    console.log(resp.data.data);
    store.SearchList.splice(0,store.SearchList.length)
    // store.SearchList = resp.data.data;   
    store.SearchList.push(resp.data.data);
    console.log(store.SearchList[0]);
    
  })
  console.log(courseContent);


  //初始化时获取所有的课程
  GetAllCourse(courseContent).then((resp) => {
    console.log(resp);
    store.AllCourse = resp.data.data
  })

}




// 点击事件获取分类id
function GetCourseId(id: any, categoryName: any) {

  // 选中专题类型后，将选中的专题类型名添加到  已选条件中
  data.TypeName = categoryName

  // isShowlevel.value=true

  // 发送请求
  GetCourseByid(id).then((resp) => {
    console.log(resp.data.data);
    store.oneCourseById = resp.data.data
  })
}

// 第二排div的状态
const isShowlevel = ref(false)
// 第一排点击的
const Dianji:any = ref(true)
const DianjiDe = ref('');

const ShowLevelTwo = (index: any) => {
  console.log(index);
  console.log(DianjiDe.value);

  if (DianjiDe.value == '' || DianjiDe.value != index) {
    DianjiDe.value = index
    console.log(typeof DianjiDe.value);
    Dianji.value = false
    isShowlevel.value = true
  }
  else if (DianjiDe.value == index) {
    if (Dianji.value) {
      Dianji.value = false
      isShowlevel.value = true
    } else {
      Dianji.value = true
      isShowlevel.value = false
    }
  }
}
// 查询课程的内容
const courseContent = reactive<any>({
  limit: "12",
  page: 1,
  thematicId: '',
  year: ''
})
// 获取thematicId（专题ID）
const ChooseType = (id: any, thematicName: any) => {
  // 已选条件中绑定的数据----第二排内容
  data.levelTwoName = thematicName
  //  console.log(id);
  courseContent.thematicId = id

  // 发请求
  GetAllCourse(courseContent).then((resp) => {
    console.log(resp);
    store.AllCourse = resp.data.data
  })
}

// 根据选择时间来获取
const ChooseTime = (time: any) => {
  // 已选条件中绑定的数据----时间
  data.ChoosedTime = time

  courseContent.year = time

  // 发请求 获取所有的课程
  GetAllCourse(courseContent).then((resp) => {
    console.log(resp);
    store.AllCourse = resp.data.data
  })
}

// 清空选择的所有条件。
const ClearChoose = () => {
  // 绑定的选中数据  清空
  data.ChoosedTime = '';
  data.TypeName = '';
  data.levelTwoName = '';

  courseContent.thematicId = '';
  courseContent.year = ''

  isShowlevel.value = false

  // 发请求
  GetAllCourse(courseContent).then((resp) => {
    console.log(resp);
    store.AllCourse = resp.data.data
  })
}

// 动态绑定选中的选项名
const data = {
  TypeName: '',       //专题类型
  levelTwoName: '',   //第二排
  ChoosedTime: ''      //选中的时间
}



</script>

<template>
  <div class="searchList">
    <div class="list" style="width: 80%">
      <div>

        <!-- 第一排 专题类型 -->
        <div class="listBox">
          <div>
            <label ref="isChoose">专题类型：</label>
            <button class="Title" v-for="(item, index) in store.SearchList[0]"
              @click="GetCourseId(item.id, item.categoryName), ShowLevelTwo(index)" v-bind="Dianji">{{
                item.categoryName }}</button>
          </div>
        </div>

        <!--第二排 专题详细分类 -->

        <template v-if="isShowlevel">
          <div class="listBox ByidCourse">
            <span v-for="item in store.oneCourseById" @click="ChooseType(item.id, item.thematicName)">{{ item.thematicName
            }}</span>
          </div>
        </template>


        <!--第三排 发布时间 -->
        <div class="listBox openTime">
          <div>
            <label>发布时间：</label>
            <template v-for="item in 2023">
              <button v-if="item > 2016 && item <= 2023" class="TimeOut" @click="ChooseTime(item)">{{ item }}</button>
            </template>
          </div>
        </div>

        <!-- 已选条件 -->
        <div class="listBox isChoosed">
          <!-- <div class="chooseBox"> -->
          <label>已选条件：</label>
          <div class="ChooseBox">
            <span class="Choosed" v-bind="data">{{ data.TypeName }}</span>
            <div class="Choosed1" v-bind="data">{{ data.levelTwoName }}</div>
            <div class="Choosed2" v-bind="data">{{ data.ChoosedTime }}</div>
          </div>
          <button @click="ClearChoose()">清除全部</button>
          <!-- </div> -->
        </div>
      </div>

      <hr />

      <template v-for="item in store.AllCourse">
        <OneCourse :price="item.price" :img="item.img" :className="item.className" :enlistsNum="item.enlistsNum"
          :teacherName="item.teacherName"></OneCourse>
      </template>
    </div>
    <div class="aside">
      <div class="NoOne" v-for="item in 3">
        <p><span style="color: blue;">|</span>小白如何学习理财</p>
        <el-image style="width: 90%; height: 90%" :src="url" fit="fit" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.searchList {
  width: 80%;
  margin: auto;
  display: flex;
}

.searchList span {
  display: inline-block;
  padding: 5px;
  margin-left: 10px;
}

.listBox {
  display: flex;
  justify-content: space-between;
  height: 35px;
  align-items: center;
}

.listBox button {
  border: none;
  background-color: white;
  width: 60px;
  height: 30px;
  margin: 20px 10px 0px 10px;
  border-radius: 20px;
}

.listBox button:hover {
  color: rgb(0, 153, 255);
  cursor: pointer;
}

.TimeOut {
  margin: 10px !important;
}

.ByidCourse {
  display: flex;
  flex-wrap: wrap;
  height: 150px;
}

/* 发布时间 */
/* .openTime button{
 margin: ;
} */

/* 左边框 */
.list {
  margin-right: 20px;
}

/* 侧边框 */
.aside {
  /* width: 20%; */
  /* width: 300px; */
  height: auto;
  margin-right: -120px;
}

.NoOne {
  width: 280px;
  height: 25%;
  margin-bottom: 20px;
}

.NoOne p {
  margin-top: 0px;
  margin-left: -10px;
}

.NoOne .el-image {
  margin-top: -10px;
  margin-left: 18px;
}

/* 已选条件 */
.isChoosed {
  height: 50px;
  line-height: 50px;
}

/* .chooseBox{
  display: flex;
  justify-content: center;
} */
.Choosed {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}

.Choosed1 {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}

.Choosed2 {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}

.isChoosed button {
  width: 100px;
  margin: 10px 0 10px 0;
}
</style>
